<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <meta
      name="description"
      content="汇融名企是面向全国商家服务的大型互联网平台，为商家提供流量扶持，引导品牌曝光；为消费者提供风云榜单，招商加盟，引导实现消费，达成合作，上汇融名企实现共赢。"
    />
    <link rel="stylesheet" href="./css/common.css" />
    <link rel="stylesheet" href="./css/news-center.css" />
    <link rel="stylesheet" href="./css/carousel.css" />
    <title>名企要闻-汇融名企</title>
  </head>
  <body>
    <!-- <div id="header-page"></div> -->
    <!--#include virtual="/header.html" -->
    <!-- 右侧悬浮导航 -->
    <div class="navRight">
      <ul>
        <li class="content1 links active" id="nav1">
          建材
        </li>
        <li class="content2 links" id="nav2">
          工程
        </li>
        <li class="content3 links" id="nav3">
          厨电
        </li>
        <li class="content4 links" id="nav4">
          生活
        </li>
        <li class="content5 links" id="nav5">
          科技
        </li>
        <li class="goTop links" id="nav6">
          <img
            src="./image/icon/index_db_icon.png"
            alt="回到顶部-汇融名企"
          />顶部
        </li>
      </ul>
    </div>
    <div class="navTop">
      <ul>
        <li class="content1 links active">建材</li>
        <li class="content2 links">工程</li>
        <li class="content3 links">厨电</li>
        <li class="content4 links">生活</li>
        <li class="content5 links">科技</li>
      </ul>
    </div>
    <div class="news-center">
      <div class="wrapper news-bg">
        <div class="news-wrapper">
          <div class="news-con container" id="content1">
            <img
              class="news-title"
              src="./image/picture/news_title01.png"
              alt="建材类-汇融名企"
            />
            <div class="news-left">
              <ul class="news-ul-left" id="newsLeftfirst1"></ul>
              <ul class="news-ul-left" id="newsLeftsecond1"></ul>
            </div>
            <div class="news-content">
              <h1>建材图片</h1>
              <ul class="news-ul-center" id="newsContent1"></ul>
            </div>
            <div class="news-right">
              <h1>热门新闻</h1>
              <ul class="news-ul-right" id="newsRight1"></ul>
            </div>
          </div>
          <div class="news-con container" id="content2">
            <img
              class="news-title"
              src="./image/picture/news_title02.png"
              alt="工程类-汇融名企"
            />
            <div class="news-left">
              <ul class="news-ul-left" id="newsLeftfirst2"></ul>
              <ul class="news-ul-left" id="newsLeftsecond2"></ul>
            </div>
            <div class="news-content">
              <h1>工程图片</h1>
              <ul class="news-ul-center" id="newsContent2"></ul>
            </div>
            <div class="news-right">
              <h1>热点评论</h1>
              <ul class="news-ul-right" id="newsRight2"></ul>
            </div>
          </div>
          <div class="news-con container" id="content3">
            <img
              class="news-title"
              src="./image/picture/news_title03.png"
              alt="厨电类-汇融名企"
            />
            <div class="news-left">
              <ul class="news-ul-left" id="newsLeftfirst3"></ul>
              <ul class="news-ul-left" id="newsLeftsecond3"></ul>
            </div>
            <div class="news-content">
              <h1>厨电图片</h1>
              <ul class="news-ul-center" id="newsContent3"></ul>
            </div>
            <div class="news-right">
              <h1>热门新闻</h1>
              <ul class="news-ul-right" id="newsRight3"></ul>
            </div>
          </div>
          <div class="news-con container" id="content4">
            <img
              class="news-title"
              src="./image/picture/news_title04.png"
              alt="生活类-汇融名企"
            />
            <div class="news-left">
              <ul class="news-ul-left" id="newsLeftfirst4"></ul>
              <ul class="news-ul-left" id="newsLeftsecond4"></ul>
            </div>
            <div class="news-content">
              <h1>生活图片</h1>
              <ul class="news-ul-center" id="newsContent4"></ul>
            </div>
            <div class="news-right">
              <h1>生活动态</h1>
              <ul class="news-ul-right" id="newsRight4"></ul>
            </div>
          </div>
          <div class="news-con container" id="content5">
            <img
              class="news-title"
              src="./image/picture/news_title05.png"
              alt="科技类-汇融名企"
            />
            <div class="news-left">
              <ul class="news-ul-left" id="newsLeftfirst5"></ul>
              <ul class="news-ul-left" id="newsLeftsecond5"></ul>
            </div>
            <div class="news-content">
              <h1>科技图片</h1>
              <ul class="news-ul-center" id="newsContent5"></ul>
            </div>
            <div class="news-right">
              <h1>科技数码</h1>
              <ul class="news-ul-right" id="newsRight5"></ul>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!--#include virtual="/footer.html" -->
    <!-- <div id="footer-page"></div> -->
    <script src="./js/jquery-1.11.0.min.js"></script>
    <script src="./js/utils.js"></script>
    <script src="./js/api.js"></script>
    <script src="./js/newsCenter.js"></script>
    <script type="text/javascript">
      $(function () {
        // $('#header-page').load('header.html')
        // $('#footer-page').load('footer.html')
        var api = new ajax('GET', '/api/news/list')
        api.then(function (res) {
          init(JSON.parse(res).data)
        })
        // 右侧悬浮导航滚动机制
        $(window).scroll(function () {
          var scrollTop = $(this).scrollTop()
          var $sections = $('.container')
          var $currentSection
          if (scrollTop >= 230) {
            $('.navRight').show()
          } else {
            $('.navRight').hide()
          }
          $sections.each(function () {
            var divPosition = $(this).offset().top
            if (divPosition - 200 < scrollTop) {
              $currentSection = $(this)
            }
            if (scrollTop > $('.header').height()) {
              var id = $currentSection.attr('id')
              $('.links').removeClass('active')
              $('.' + id).addClass('active')
            }
          })
          if (scrollTop < 139) {
            $('.links').removeClass('active')
            $('.content1').addClass('active')
          }
        })
        // 返回顶部
        $('#nav6').click(function () {
          $('html,body').animate({ scrollTop: 0 }, 100)
        })
        for (var i = 1; i < 6; i++) {
          onClick(i)
        }
      })
      // 点击导航跳转某处
      function onClick(val) {
        $('.content' + val).click(function () {
          $('html,body').animate(
            { scrollTop: $('#content' + val).offset().top + 1 },
            100
          )
        })
      }
      function init(data) {
        initData(data)
        onImgerror()
      }
      // 图片报错处理机制
      function onImgerror() {
        var URLImg = './image/picture/news_img0'
        var content = '#content'
        for (var i = 0; i < 5; i++) {
          ;(function (i) {
            $(content + (i + 1) + ' .img-center1').error(function () {
              $(this).attr('src', URLImg + (i * 3 + 1) + '.png')
            })
            $(content + (i + 1) + ' .img-center2').error(function () {
              $(this).attr('src', URLImg + (i * 3 + 2) + '.png')
            })
            $(content + (i + 1) + ' .img-right').error(function () {
              $(this).attr('src', URLImg + (i * 3 + 3) + '.png')
            })
          })(i)
        }
      }
      // 渲染数据
      function initData(data) {
        var newsContent = '#newsContent'
        var newsRight = '#newsRight'
        var newsLeftfirst = '#newsLeftfirst'
        var newsLeftsecond = '#newsLeftsecond'
        for (let key = 0; key < 5; key++) {
          if (data[key].info.length > 0) {
            initNewscontent(
              $(newsContent + (+key + 1)),
              data[key].info.slice(0, 2)
            )
            initNewsright($(newsRight + (+key + 1)), data[key].info.slice(2, 8))
            initNewsleft(
              $(newsLeftfirst + (+key + 1)),
              data[key].info.slice(8, 14)
            )
            initNewsleft(
              $(newsLeftsecond + (+key + 1)),
              data[key].info.slice(14, 20)
            )
          }
        }
      }
      
    </script>
  </body>
</html>
